{% extends "_layout.html" %}

{# 样式代码 #}
{% block style %}
    <link href="css/index.css" rel="stylesheet" >
{% endblock %}

{# body代码#}
{% block body %}
    <!--container start-->
	<div class="container_white" id="order_state">
		<div class="container">
			<div class="title">我的订单</div>
			<div class="title_img">
				<img src="img/title.png"/>
			</div>
			<div class="order_top">
				<ul>
					<li class="fl active">
						<div class="order_state_title">
							<a href="javascript:void(0);" onclick="payment(this,1)">待付款</a>
						</div>
						<div class="order_number">2</div>
					</li>
					<li class="fl">
						<div class="order_state_title">
							<a href="javascript:void(0);" onclick="payment(this,2)">待发货</a>
						</div>
						<div class="order_number">2</div>
					</li>
					<li class="fl">
						<div class="order_state_title">
							<a href="javascript:void(0);" onclick="payment(this,3)">待收货</a>
						</div>
						<div class="order_number">2</div>
					</li>
					<li class="fl">
						<div class="order_state_title">
							<a href="javascript:void(0);" onclick="payment(this,4)">待评价</a>
						</div>
						<div class="order_number">2</div>
					</li>
				</ul>
				<div class="line line_top">
					<img src="img/line.png"/>
				</div>
				<div class="line line_bot">
					<img src="img/line.png"/>
				</div>
			</div>
			<div class="order_tab">
				<div class="tab_dishes fl">套餐名称</div>
				<div class="tab_time fl text-center">下单时间</div>
				<div class="tab_count fl text-center">数量</div>
				<div class="tab_price fl text-center">价格</div>
				<div class="tab_operate fl text-center">操作</div>
			</div>
			<ul class="order_list">
				<li></li>
				<!-- <li>
					<div class="order_name fl">意大利面</div>
					<div class="order_time fl text-center">2017-05-20</div>
					<div class="order_count fl text-center">2</div>
					<div class="order_price fl text-center">￥208</div>
					<div class="order_operate fl text-center">
						<div class="order_cancel fr">
							<a href="javascript:void(0);" onclick="cancelOrder(this,11)">取消订单</a>
						</div>
						<div class="go_payment fr">
							<a href="pay.html">去付款</a>
						<div class="line_a"></div></div></div><div class="line"><img src="img/line.png">
					</div>
				</li> -->
				<!-- <li>
					<div class="order_name fl">意大利面</div>
					<div class="order_time fl text-center">2017-05-20</div>
					<div class="order_count fl text-center">2</div>
					<div class="order_price fl text-center">￥208</div>
					<div class="order_operate fl text-center">
						<div class="evaluate">
							<a href="/evaluation">去评价</a>
						</div>
					</div>
					<div class="line"><img src="img/line.png"></div>
				</li> -->
			</ul>
		</div>
		<!--消息弹出框-->
		<div class="new_prop">
			
		</div>
		<div class="new_prop_bg" onclick="closeProp()"></div>			
	</div>
	<!--container end-->
{% endblock %}
{#js代码#}
{% block js %}
    <script type="text/javascript" src="js/index.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$.ajax({
				url:"data/payment.json",
				type:"GET",
				//data:{orderId:id},
				dataType:"json",
				success:function(data){
					//console.log(data.length);
					for(var i=0;i<data.length;i++){
						var content = "<li><div class='order_name fl'>"+ data[i].orderNumber +"</div><div class='order_time fl text-center'>"+ data[i].orderTime +"</div><div class='order_count fl text-center'>"+ data[i].orderCount +"</div><div class='order_price fl text-center'>￥"+ data[i].totalMoney +"</div><div class='order_operate fl text-center'><div class='order_cancel fr'><a href='javascript:void(0);' onclick='cancelOrder(this,"+ data[i].orderId +")'>取消订单</a></div><div class='go_payment fr'><a href='/pay'>去付款</a><div class='line_a'></div></div></div><div class='line'><img src='img/line.png'/></div></li>";
						$('.order_list li').replaceWith(content);
					}
				}
			})
		});
	</script>
{% endblock %}